<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>手风琴效果</title>
		<style>
			ul {
				list-style: none;
				margin: 0;
				padding: 0
			}
			
			div {
				width: 1200px;
				height: 400px;
				margin: 50px auto;
				overflow: hidden
			}
			
			div li {
				width: 240px;
				height: 400px;
				float: left
			}
		</style>
	</head>

	<body>
		<div id="box">
			<ul>
				<li><img src="1.jpg"></li>
				<li><img src="2.jpg"></li>
				<li><img src="3.jpg"></li>
				<li><img src="4.jpg"></li>
				<li><img src="5.jpg"></li>
			</ul>
		</div>
		<script src="jquery-1.12.4.min.js"></script>
<script>
	/*给li添加移出事件
	 移入事件：1）当前li设置width为958px 2其他兄弟设置为width为60.5移出事件
	 所有liwidth为240px*/
	$('#box ul li').mouseover(
		function(){
			$(this).css('width','958px');
			$(this).siblings().css('width','60.5px');
			$(this).css('transition-duration','1.9s');
		}
	);
	$('#box ul li').mouseout(
		function(){
			$('li').css('width','240px');
		}
	);
</script>
	</body>

</html>